
<template>
<div id="viewuser">

  <!--电费充值弹框-->
     <el-dialog title="电费充值" :visible.sync="open1" >
        <div style="height:650px;position:relative;">
                    <div style="border:3px solid grey;width:440px;position:absolute;">
                    <img src="@/assets/wx.jpg" style="height:600px;">
                    </div>

                    <div style="position:absolute;left:530px;">

                             <el-form >
                                <el-form-item label="宿舍编号：" >
                                  <el-input  v-model="roomid"  autocomplete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-form >
                                <el-form-item label="充值金额：" >
                                  <el-input v-model="paynum" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>

                             <el-form >
                                <el-form-item label="支付人：" >
                                  <el-input v-model="payName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>

                            <div slot="footer" class="dialog-footer">
                            <el-button @click="open1 = false">取 消</el-button>
                            <el-button type="primary" @click="topay()">确定充值</el-button>
                            </div>
                    </div>
      </div>
    </el-dialog>



 <!--今年充值图表弹框-->
     <el-dialog title="今年充值图表" :visible.sync="open" >
<div style="height:400px;">
 <div   class="echart" id="mychart" :style="myChartStyle"> </div>
</div>
     </el-dialog>



      <el-table
    :data="pagination.list"


    border
    :cell-style="rowstyle"
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width: 950px;margin-left:190px;">

    <el-table-column
      prop="storeyname"
      label="楼栋名称"
      width="120"

      >

    </el-table-column>


    <el-table-column
      prop="roomname"
      label="宿舍号"
      width="120">
    </el-table-column>


    <el-table-column
      prop="remainingElectricity"
      label="剩余金额"
      width="120">
    </el-table-column>

     <el-table-column
      prop="electricstatus"
      label="状态"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="410"
     align="center">
      <template slot-scope="scope">
         <el-button type="primary"   @click="handleselect(scope.row)">查看充电情况</el-button>
        <el-button type="success"   @click="addselect(scope.row)">查看充值记录</el-button>
          <el-button type="info"   @click="paye(scope.row)">充值电费</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!--分页-->
     <el-pagination
      style="margin-left:190px;margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[1,2,3,4,5,6,7]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


  <!---查看充值记录-->


<el-dialog title="充值记录" :visible.sync="selectElectricDetail">
  <el-table :data="ElectricDetail.list"     :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"  :cell-style="rowstyle">
    <el-table-column property="roomname" label="宿舍名称" width="150"></el-table-column>
     <el-table-column property="rechargeamount" label="充值金额" width="200"></el-table-column>
    <el-table-column property="rechargename" label="充值人" width="200"></el-table-column>
    <el-table-column property="rechargedate" label="充值日期"></el-table-column>
    <el-table-column property="payeeman" label="收款单位" width="200"></el-table-column>

  </el-table>
   <el-pagination
      style="margin-left:190px;margin-top:20px;"
      @size-change="handleSizeChangeelectric"
      @current-change="handleCurrentChangeelectric"
      :current-page="ElectricDetail.current"
      :page-sizes="[1,2,3,4,5,6]"
      :page-size="ElectricDetail.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="ElectricDetail.total">
    </el-pagination>
</el-dialog>

</div>
</template>
<script>

import * as echarts from "echarts";

  export default {




    data() {
      return {

      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
,



       pagination:{},
       selectElectricDetail:false,
       ElectricDetail:{},
       open:false,
        open1:false,
       roomid:'',
       paynum:'',
       payName:'',
       moneys:[]





      };
    },

 mounted(){
  this.find();
  this.initEcharts();
 },


    methods: {
topay(){
//开始充值操作
            var url="/Electricdetails/pay" ;
          var params=new URLSearchParams();
          params.append("Electricroomid",this.roomid);
          params.append("rechargename",this.payName);
          params.append("rechargeamount",this.paynum);


          this.$axios.post(url,params).then(resp=>{

                  this.open1 =  false;
                  this.find();

                 this.payName ='';
                 this.paynum ='';


                        this.$message({message:'充值成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});


          })
}
   ,



// 打开 电费弹窗
paye(row){
this.open1=true;
this.roomid  = row.roomid;

},

      // 打开记录弹框
      handleselect(row){

        this.moneys = [];
        this.open =true;
        this.roomid=row.roomid;
        this.$nextTick(() => {
	      this.initEcharts();
        });

      },

 rowstyle(){
       return "text-align: center" ;
       }

  ,

     find(page=1,size=6){
       var url="/Electric/select" ;
          var params=new URLSearchParams();
          params.append("current",page);
            params.append("size",size);


          this.$axios.post(url,params).then(resp=>{

               this.pagination=resp.data;
               console.log(resp.data);
          })
     },

       //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size){
          this.find(this.pagination.current,size)

      },
      //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page){
        this.find(page,this.pagination.size)
      },

  //===========================================================================

      addselect(row,page=1,size=6){

          var url="/Electricdetails/select" ;
          var params=new URLSearchParams();
         this.roomid  = row.roomid;

          params.append("roomid",this.roomid);
          params.append("current",page);
            params.append("size",size);
          this.$axios.post(url,params).then(resp=>{

                //赋值
                 this.ElectricDetail=resp.data;
                 // 打开弹窗
                 this.selectElectricDetail=true;

          })



      },

 addselect1(roomid,page=1,size=6){

          var url="/Electricdetails/select" ;
          var params=new URLSearchParams();


          params.append("roomid",roomid);
          params.append("current",page);
            params.append("size",size);
          this.$axios.post(url,params).then(resp=>{

                //赋值
                 this.ElectricDetail=resp.data;
                 // 打开弹窗
                 this.selectElectricDetail=true;

          })



      },




       // 改变页大小
      handleSizeChangeelectric(size){
          this.addselect1(this.roomid, this.ElectricDetail.current,size)

      },

      // 跳转到哪一页
      handleCurrentChangeelectric(page){
        this.addselect1(this.roomid,page,this.ElectricDetail.size)
      },



      // ========================================================================
 initEcharts() {



 const myChart = echarts.init(document.getElementById("mychart"));

      //加载动画
      myChart.showLoading();

    //异步加载数据

      var url="/Electricdetails/selectRoomId";
      var params = new URLSearchParams();
      params.append("electricroomid",this.roomid);
      this.$axios.post(url,params).then(resp=>{
        this.moneys=resp.data.data;
        myChart.hideLoading();

        var option = {
        title: {
          text: '该宿舍今年每月充值的电费统计'
        },
        tooltip: {},
        legend: {
          data: ['该宿舍今年每月充值的电费统计']
        },
        xAxis: {
          data: ['一月','二月','三月', '四月', '五月', '六月','七月','八月','九月','十月','十一月','十二月']
        },
        yAxis: {},
        series: [
          {
            name: '该宿舍今年每月充值的电费统计',
            type: 'bar',
            data: [
              {value:this.moneys[0].moneys,name:this.moneys[0].date},
              {value:this.moneys[1].moneys,name:this.moneys[1].date},
               {value:this.moneys[2].moneys,name:this.moneys[2].date},
                {value:this.moneys[3].moneys,name:this.moneys[3].date},
                 {value:this.moneys[4].moneys,name:this.moneys[4].date},
                  {value:this.moneys[5].moneys,name:this.moneys[5].date},
                   {value:this.moneys[6].moneys,name:this.moneys[6].date},
                    {value:this.moneys[7].moneys,name:this.moneys[7].date},
                     {value:this.moneys[8].moneys,name:this.moneys[8].date},
                      {value:this.moneys[9].moneys,name:this.moneys[9].date},
                       {value:this.moneys[10].moneys,name:this.moneys[10].date},
                        {value:this.moneys[11].moneys,name:this.moneys[11].date},
              ]
            }
        ]


      };

      myChart.setOption(option);

      })









 },
    }
  };
</script>





<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 50px;


  }


</style>

